@import "./mixin.less";
@import "./var.less";
@height: 60px;
.msg {
  height: @height;
  line-height: @height;
  .self-center();
  display: flex;
  text-align: center;
  justify-items: center;
  align-items: center;
  vertical-align: middle;
  transition: 400ms linear;
  background-color: rgba(245, 245, 245, 0.8);
  transform: translate(-50%, -50%) translateY(25px);
  opacity: 0;
  z-index: 99;
  border-radius: 8px;
  box-shadow: -2px 2px 5px rgba(0,0,0,.5);
  padding: 10px 10px 10px;
  font-weight: bolder;
  // 防止元素在受到transform元素影响下宽度被挤压
  white-space: nowrap;
  

  span {
    margin-right: 8px;
    font-size: 25px;
  }
  div {
    height: @height;
    line-height: @height;
    font-size: 20px;
  }

  &-info {
    color: @deepdark;
    border: 1px solid @deepdark;
  }
  &-success {
    color: @success;
    border: 1px solid @success;
  }
  &-warn {
    color: @warn;
    border: 1px solid @warn;
  }
  &-error {
    color: @danger;
    border: 1px solid @danger;
  }
}